import React,{Component} from 'react';
import {Platform, StyleSheet,ScrollView,Text, View,TouchableOpacity, Alert,Image } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class attendance extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
	render(){
		return(
		    <ScrollView style={styles.ScrollView}>
		        <View style={styles.box}>
			        <View style={styles.modular}>
			       		<TouchableOpacity style={[styles.modularLeft, styles.modularLeftSugar]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/sugar.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>血糖</Text>
			        	</TouchableOpacity>
			        	<TouchableOpacity style={[styles.modularRight, styles.modularRightPressure]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/pressure.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>血压</Text>
			        	</TouchableOpacity>
			        </View>
			        <View style={styles.modular}>
			       		<TouchableOpacity style={[styles.modularLeft, styles.modularLeftHeartRate]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/heartRate.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>心率</Text>
			        	</TouchableOpacity>
			        	<TouchableOpacity style={[styles.modularRight, styles.modularRightSleep]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/sleep.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>睡眠监控</Text>
			        	</TouchableOpacity>
			        </View>
			        <View style={styles.modular}>
			       		<TouchableOpacity style={[styles.modularLeft, styles.modularLeftAccident]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/Accident.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>意外保健</Text>
			        	</TouchableOpacity>
			        	<TouchableOpacity style={[styles.modularRight, styles.modularRightOnekey]}>
			        		<View style={styles.icon}>
			        			<Image style={styles.iconImages} resizeMode={'contain'} source={require('../img/partner/Onekey.png')}></Image>
			        		</View>
			        		<Text style={styles.modularText}>一键呼救</Text>
			        	</TouchableOpacity>
			        </View>
		        </View>
         	</ScrollView>
		);
	}
}
const styles = StyleSheet.create({
	modularLeftSugar:{backgroundColor: '#7596FF'},
	modularLeftHeartRate:{backgroundColor: '#E65C57'},
	modularRightPressure:{backgroundColor: '#F3844C'},
	modularRightSleep:{backgroundColor: '#02AD9B'},
	modularLeftAccident:{backgroundColor: '#9748F3'},
	modularRightOnekey:{backgroundColor: '#018DEF'},
	modularText: {
		fontSize: 18,color: "white",height: "30%",marginTop:10,margin:5,
	},
	iconImages:{
		height: "100%",width:"100%",alignSelf: 'center',
	},
	icon:{
		height: "55%",width:"100%",marginTop:20,
	},
	modularLeft:{
		flex:1,backgroundColor: 'white',marginRight:6,height: "100%",width:"100%",borderRadius: 3,
	},
	modularRight:{
		flex:1,backgroundColor: 'white',marginLeft:6,height: "100%",width:"100%",borderRadius: 3,
	},
	modular:{
		flexDirection:'row',height: 150,paddingLeft:12,paddingTop:12,paddingRight:12,
	},
	ScrollView:{
		backgroundColor: '#F5F5F5',
	},
});
